<style scoped lang="scss">

.default-text {
  width: 10rem;
  height: 93vh;
  display: flex;
  @include flex-center;

  p {
    font-size: .4267rem;
    color: $color-white;
  }
}

.comments-list {
  width: 10rem;
  height: 93vh;
  display: flex;
  flex-direction: column;

  .comments-list-wrap {
    width: 10rem;
    height: 2.1333rem;
    @include flex-center;
    background: #1c1f2a;

    .comments-item {
      width: 9.4667rem;
      height: 1.6rem;
      @include flex-align-center;

      .comments-img {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        margin-right: .2667rem;

        img {
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 50%;
        }
      }

      .comments-info {
        width: 6.0267rem;
        height: 1.6rem;

        p {
          color: #e8e8e9;
          margin-top: .0533rem;
          font-size: .3733rem;
        }

        span {
          margin-top: .2667rem;
          font-size: .32rem;
          color: #8b8c96;
          line-height: 0;
          display: block;
        }
      }

      .comments-btn {
        width: 1.6rem;
        height: 1.6rem;
        @include flex-center;
        border-radius: .1333rem;

        img {
          width: 1.6rem;
          height: 1.6rem;
        }
      }
    }
  }
}
</style>
<!-- 评论列表页面 -->
<template>
  <div>
    <PageTitleBar title="评论" :path="'/message'" />
  </div>
  <div class="default-text" v-if="false">
    <p>暂无评论用户</p>
  </div>
  <!-- 评论用户列表 -->
  <div class="comments-list">
    <!-- 评论用户列表 -->
    <div class="comments-list-wrap" v-for="item in commentsList" :key="item.userId">
      <div class="comments-item">
        <div class="comments-img">
          <img :src="`http://43.138.15.137:3000${item.userAvatar}`" alt="">
        </div>
        <div class="comments-info">
          <p>@{{ item.userNickname }}</p>
          <p>{{ item.commentContent }}</p>
          <span>{{ item.createdAt }}</span>
        </div>
        <div class="comments-btn">
          <img :src="item.videoCover" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import PageTitleBar from '@/components/common/PageTitleBar.vue'


</script>